<template>
  <div>
    <div id="slider" class="mui-slider">
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <div class="mui-scroll">
          <a
            :class="['mui-control-item', item.id==0?'mui-active':'']"
            href="#item1mobile"
            data-wid="tab-top-subpage-1.html"
            v-for="item in itemList"
            :key="item.id"
          >{{item.name}}</a>
        </div>
      </div>
    </div>
    <ul class="photo_list">
      <router-link v-for="item in imgList" :key="item.id" :to="'/home/photoList/'+item.id" tag="li">
        <img v-lazy="item.url">
        <div class="info">
            <h1 class="title">{{item.title}}</h1>
            <div class="body">
                {{item.desrc}}
            </div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
import mui from "../../lib/mui/js/mui.min.js";
export default {
  data() {
    return {
      itemList: [
        { id: 0, name: "全部" },
        { id: 1, name: "美女" },
        { id: 2, name: "风景" },
        { id: 3, name: "建筑" },
        { id: 4, name: "星空" },
        { id: 5, name: "山河" },
        { id: 6, name: "历史人文" }
      ],
      imgList: [
        {
          id: 0,
          title: "mdkadmad",
          url:
            "http://pic1.16pic.com/00/16/46/16pic_1646508_b.jpg",
          desrc:
            "就打击打击的就ok佛开，口服抗。，可大颗大颗大大的数据库大大肯德基啊"
        },
        {
          id: 1,
          title: "mdkadmad",
          url:
            "http://img.zcool.cn/community/01b078574706206ac72525ae0beaed.jpg@2o.jpg",
          desrc:
            "就打击打击的就ok佛开，口服抗。，可大颗大颗大大的数据库大大肯德基啊"
        },
        {
          id: 2,
          title: "mdkadmad",
          url: "http://pic38.nipic.com/20140212/17942401_101320663138_2.jpg",
          desrc:
            "就打击打击的就ok佛开，口服抗。，可大颗大颗大大的数据库大大肯德基啊"
        },
        {
          id: 3,
          title: "mdkadmad",
          url: "http://img2.3lian.com/2014/f4/140/d/72.jpg",
          desrc:
            "就打击打击的就ok佛开，口服抗。，可大颗大颗大大的数据库大大肯德基啊"
        },
        {
          id: 4,
          title: "mdkadmad",
          url: "http://pic2.16pic.com/00/17/06/16pic_1706842_b.jpg",
          desrc:
            "就打击打击的就ok佛开，口服抗。，可大颗大颗大大的数据库大大肯德基啊,就打击打击的就ok佛开，口服抗。，可大颗大颗大大的数据库大大肯德基啊,就打击打击的就ok佛开，口服抗。，可大颗大颗大大的数据库大大肯德基啊"
        },
        {
          id: 5,
          title: "mdkadmad",
          url:
            "http://img1.cache.hxsd.com/hxsdmy/gallery/2013/01/87/81/91/03/08/134035862/12737_4_026a.jpg",
          desrc:
            "就打击打击的就ok佛开，口服抗。，可大颗大颗大大的数据库大大肯德基啊"
        },
        {
          id: 6,
          title: "mdkadmad",
          url:
            "http://img2.imgtn.bdimg.com/it/u=3230999856,2515271928&fm=26&gp=0.jpg",
          desrc:
            "就打击打击的就ok佛开，口服抗。，可大颗大颗大大的数据库大大肯德基啊"
        }
      ]
    };
  },
  mounted() {
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  }
};
</script>

<style lang="less" scoped>
* {
  touch-action: pan-y;
}

.photo_list {
  list-style: none;
  margin: 0;
  padding:10px;
  padding-bottom: 0px;
  li {
    background-color: rgb(199, 191, 191);
    text-align: center;
    margin-bottom: 10px;
    box-shadow: 0 0 9px #999;
    position: relative;
    img[lazy="loading"] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
    img{
        width: 100%;
        vertical-align: middle;
        max-height: 210px;
    }
    .info{
        color: white;
        text-align: left;
        position: absolute;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.5);
        max-height: 70px;
        .title{
            font-size: 16px;
        }
        .body{
            font-size: 13px;
        }
    }
  }
}
</style>
